<template>
    <div id="cartstore">
        
        <div class="cartstore-left">
            <div class="left-check">
                <input type="checkbox" :checked="item.checked" @click="onClickCheck">
            </div>
            <div class="left-img">
                <img :src="item.productImage" alt="">
            </div>
            <div class="left-title">{{item.productName}}</div>
        </div>
        <div class="cartstore-right">
            <div class="right-price">{{item.salePrice | filterPrice}}</div>
            <!-- 计数器 -->
            <div class="right-number">
                <el-input-number 
                    :value="item.count"
                    @change="handleChange" 
                    size="mini"
                    :min="1" 
                ></el-input-number>
            </div>
            <div class="right-price"> {{item.salePrice*item.count | filterPrice}}</div>
            <!-- 删除 -->
            <el-button 
                type="danger" 
                icon="el-icon-delete" 
                circle
                @click="onClickDelete"
            ></el-button>
        </div>

    </div>
</template>

<script>
export default {
    props:{
        item:Object
    },
    methods: {
        // 计数器 绑定值改变时触发
        handleChange(currentValue, oldValue) {
            // console.log(currentValue, oldValue);
            this.$store.commit("cartModule/CHANGE_COUNT",{
                id:this.item._id,
                currentValue:currentValue
            });
        },
        // 点击 input单选框
        onClickCheck(event){
            var checked = event.target.checked;
            console.log(checked);
            this.$store.commit("cartModule/CHANGE_STORE_CHECKED",{
                id:this.item._id,
                checked:checked
            })
        },
        // 点击 删除
        onClickDelete(){
            this.$store.commit("cartModule/CLICK_DELETE",this.item._id);
        }
    },
    // 过滤器
    filters:{
        // 过滤价格
        filterPrice:function(price){
            return "￥" + " " + price.toFixed(2)
        }
    }
}
</script>

<style lang="scss" scoped>
#cartstore{
    width:100%;
    height:100px;
    // background-color: red;
    border-bottom:1px solid lightgrey;
    display: inline-flex;
    justify-content: flex-start;
    align-items: flex-start;
    .cartstore-left{
        width:42%;
        height:100%;
        // border:1px solid red;
        display: inline-flex;
        justify-content: space-around;
        align-items: center;
        .left-check{
            width:13%;
            height:100%;
            display: inline-flex;
            justify-content: center;
            align-items: center;
        }
        .left-img{
            width:15%;
            height:100%;
            display: inline-flex;
            justify-content: flex-start;
            align-items: center;
            img{
                width:72%;
                border:1px solid lightgrey;
            }
        }
        .left-title{
            width:72%;
            height:100%;
            display: inline-flex;
            justify-content: flex-start;
            align-items: center;
            
        }
    }
    .cartstore-right{
        width:58%;
        height:100%;
        display: inline-flex;
        justify-content: space-around;
        align-items: center;
        .right-price{
            width:20%;
            text-align: center;
            // border:1px solid red;
        }
    }
}  
</style>